<template>
	<view>
		<view class="top"></view>
		<image class="meanBg"
			src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2023-03-03/fb3a7b8e-e967-4553-8d8b-9e3206f0c1df_mean_bg.png">
		</image>
		<view class="mean">
			<view class="meanItem" @click="nav('/pages/adopt/adopt')">
				<text>鸽笼认养</text>
				<text class="des">认养赢积分</text>
			</view>
			<view class="line"></view>
			<view class="meanItem" @click="nav('/pages/shop/shop')">
				<text>鸽子商城</text>
				<text class="des">美味红烧乳鸽</text>
			</view>
		</view>
		<view class="center">
			<view class="centerItem" @click="nav('/pages/consultingInformation/consultingInformation')">
				<image class="img1"
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2023-02-20/a78afbcd-fb55-4bc9-8271-4b1a23268184_%E9%97%AE%E5%8F%B71.png">
				</image>
				<text>认养须知</text>
			</view>
			<view class="centerItem" @click="nav('/pages/science/science')">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2023-02-20/b4a78f15-d5c4-4465-8871-6f59130ff335_%E7%94%B5%E5%8A%9B%E7%A7%91%E6%99%AE.png">
				</image>
				<text>鸽子科普</text>
			</view>
			<view class="centerItem" @click="nav('/pages/message/message')">
				<view class="badge-container">
					<image class="badge-image"
						src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2023-02-20/bfe432a7-0bb1-4797-8a5d-1a8dbd06d22c_%E6%B6%88%E6%81%AF2.png"
						mode="aspectFill" />
					<text v-if="notReadCount" class="badge-text">{{notReadCount}}</text>
					<text class="">消息</text>
				</view>
			</view>
		</view>
		<swiper circular indicator-dots autoplay="true" class="swiper">
			<swiper-item v-for="item in swiperList" class="swiperItem" :key="item.id"
				@click="navToGoodsDetail(item.goodsId)">
				<image :src="item.url"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图列表
				swiperList: [],
				//未读消息记录
				notReadCount: 0,
			}
		},
		onShow() {
			this.getSwiperList()
			//判断是否有登录，登录了就获取消息列表
			if (uni.getStorageSync('TOKEN')) {
				this.getMessageNotReadCount();
			}
		},
		onLoad() {
			this.SCREEN_HEIGHT = getApp().globalData.SCREEN_HEIGHT
			this.SCREEN_WIDTH = getApp().globalData.SCREEN_WIDTH
		},
		methods: {
			// 获取首页轮播图列表
			async getSwiperList() {
				const res = await this.$myRequest({
					url: 'staticinfo/applet/getSwiperList'
				})
				if (res && res.code === 0 && res.data.length > 0) {
					this.swiperList = res.data
				}
			},
			nav(path) {
				uni.navigateTo({
					url: path
				})
			},
			//获取未读消息数
			async getMessageNotReadCount() {
				const res = await this.$myRequest({
					url: 'adoption/message/getNotReadCount'
				})
				if (res && res.code === 0) {
					this.notReadCount = res.data;
				}
			},
			navToGoodsDetail(goodsId) {
				if (goodsId) {
					uni.navigateTo({
						url: '/pages/goodsDetail/goodsDetail?id=' + goodsId
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/iconfont/iconfont.css';

	.badge-container {
		position: relative;
		display: inline-block;
		margin-right: 10rpx;

		.badge-image {
			width: 80rpx;
			height: 80rpx;
		}

		.badge-text {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			min-width: 10rpx;
			padding: 4px;
			text-align: center;
			border-radius: 10px;
			background-color: red;
			color: white;
			font-size: 21rpx;
			font-weight: bold;
			line-height: 1;
		}
	}

	page {
		background-color: #F8F8F8;
	}

	.top {
		background-color: #FFB300;
		height: 150rpx;
		border-radius: 0 0 50px 50px;
	}

	.meanBg {
		z-index: 0;
		position: absolute;
		height: 330rpx;
		width: 620rpx;
		top: -10rpx;
		left: 65rpx;
		border-radius: 20px;
	}

	.mean {
		height: 330rpx;
		width: 620rpx;
		position: absolute;
		top: -10rpx;
		left: 65rpx;
		border-radius: 20px;
		display: flex;

		.meanItem {
			width: 50%;
			height: 250rpx;
			text-align: center;
			z-index: 1;

			text {
				margin-top: 60rpx;
				font-weight: 900;
				display: block;
			}

			.des {
				font-size: 20rpx;
				margin-top: 1rpx;
				font-weight: 600;
			}
		}

		.line {
			border-left: 1px solid #cfcfcf;
			height: 230rpx;
			margin-top: 50rpx;
		}
	}

	.center {
		height: 180rpx;
		margin: 170rpx 90rpx 0 90rpx;
		border-radius: 10px;
		display: flex;

		.centerItem {
			color: black;
			width: 180rpx;
			height: 170rpx;
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 10px;
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				font-size: 30rpx;
				display: block;
			}
		}
	}

	.ad {
		width: 650rpx;
		height: 550rpx;
		margin: 0 50rpx 0 50rpx;
		border-radius: 10px;
	}


	.img1 {
		position: relative;

		.badge {
			position: absolute;
			top: -1rpx;
			right: -3rpx;
		}
	}

	.dot {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		background-color: red;
		position: absolute;
		font-size: 25rpx;
		border-radius: 60px;
		top: 335rpx;
		right: 130rpx;
		color: white;
	}

	.swiper {
		width: 650rpx;
		height: 550rpx;
		margin: 0 50rpx 0 50rpx;
		border-radius: 10px;

		.swiperItem {
			border-radius: 10px;
			
			image{
				width: 100%;
				height: 100%;
				object-fit:cover;
			}
		}
	}
</style>
